import React, { useEffect, useState } from 'react'
import '../css/Hwj_index.css'
import { Toast, NavBar, Tag, Divider, Cell, Tabs, Sticky } from 'react-vant';
import { createFromIconfontCN } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom';
import { get } from '../../../axios/request'
const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4695075_oa1temkdqb.js'
)
export default function Hwj_progress() {
    let navigate = useNavigate()
    let [orders, setOrders] = useState(
        [
            { _id: '1', times: '6月24日 10:00', start_add: '鲲玺园', end_add: '保理', ty: '司机要求加价', sta: "已完成",data:'12:00' },
            { _id: '2', times: '6月24日 10:00', start_add: '鲲玺园', end_add: '保理', ty: '司机绕路', sta: "处理中" ,data:'12:00' },
        ]
    )
    let [btn, setBtn] = useState('处理中')
    let [progress,setProgress] = useState([])
    let getprogress = async () => {
        let res = await get('/hwj/getprogress')
        console.log(res.data);
        if (res.code === 200) {
            setProgress(res.data)
        }
    }
    useEffect(() => {
        getprogress()
    }, [])
    return (
        <div id='progressbox'>
            <Sticky>
                <div className="headerbox">
                    <NavBar
                        title="处理进度查询"
                        // leftText=""
                        // rightText="按钮"
                        onClickLeft={() => { navigate(-1) }}
                        onClickRight={() => Toast('按钮')}

                    />
                    <div className='pro_header'>
                        <div style={{
                            width: '45%',
                            display: 'flex',
                            justifyContent: 'space-between',
                            margin: '0 auto'
                        }}>
                            {
                                ['处理中', '已完成'].map(item => (
                                    <span key={item} onClick={() => {
                                        setBtn(item); console.log(item);
                                    }} className={btn === item ? 'active' : ''}>
                                        {item}
                                    </span>
                                ))
                            }
                        </div>
                    </div>
                </div>
            </Sticky>
            <div className="conbox">
                {
                    progress.filter(i => i.sta === btn).map(item => (
                        <Cell
                        onClick={()=>{navigate('/hwj_progresscon',{state:{id:item._id}})}}
                            key={item._id}
                            title={
                                <div className='con_2'>
                                    <h5 style={{ fontWeight: '900', fontSize: '14px', color: '#000' }}>{item.ty}</h5>
                                    {/* <Tag color="rgb(227, 227, 227)" textColor="grey">已完成</Tag> */}
                                    <p style={{fontSize:'12px'}}>{item.times}</p>
                                </div>
                            }
                            isLink
                            label={
                                <div className="con_1">
                                    <p>约车 {item.jid.times}</p>
                                    <div>
                                        <IconFont name='icon-yuandian' fontSize={25} />
                                        <span>{item.jid.start}</span>
                                    </div>
                                    <div>
                                        <IconFont name='icon-yuandian-green' fontSize={25} />
                                        <span>{item.jid.end}</span>
                                    </div>
                                </div>
                            }
                            size='large'
                        />
                    ))
                }
            </div>

        </div>
    )
}
